<template>
  <div
    @click="
      () => {
        if (!disabled) visible = true;
      }
    "
  >
    <slot>
      <a-input
        v-model="inputValue"
        :disabled="disabled"
        :placeholder="placeholder || '请选择产品'"
      />
    </slot>
  </div>
  <a-modal title="请选择物料" v-model:visible="visible" :width="800">
    <template #footer>
      <a-space>
        <a-button @click="visible = false">取消</a-button>
      </a-space>
    </template>
    <div style="height: 20px" />

    <tableTurn :tableData="getData" ref="tableRef">
      <a-table-column
        align="center"
        :width="200"
        title="物料编码"
        data-index="number"
      />
      <a-table-column
        align="center"
        :width="150"
        title="物料名称"
        data-index="name"
      />

      <a-table-column
        align="center"
        :width="150"
        title="规格型号"
        data-index="spec"
      />
      <a-table-column
        align="center"
        data-index="basicName"
        :width="100"
        title="基本单位"
      />
      <a-table-column
        align="center"
        :width="100"
        title="物料/产品"
        data-index="spec"
      />
      <a-table-column
        align="center"
        :width="100"
        title="所属分类"
        data-index="spec"
      />
      <a-table-column align="center" :width="100" title="是否启用">
        <template #cell="{ record }">
          <div
            :class="record.enable === 1 ? 'state-item-Y' : 'state-item-N'"
            class="state-item"
          >
            {{ record.enable === 1 ? '是' : '否' }}
          </div>
        </template>
      </a-table-column>
      <a-table-column
        align="center"
        :width="100"
        title="设置安全库存"
        data-index="spec"
      >
      </a-table-column>
      <a-table-column
        align="center"
        :width="200"
        title="备注"
        data-index="remark"
      >
      </a-table-column>
      <a-table-column align="center" :width="100" fixed="right" title="操作">
        <template #cell="{ record }">
          <a-link @click="choice(record)">选择</a-link>
        </template>
      </a-table-column>
    </tableTurn>
  </a-modal>
</template>

<script setup lang="ts">
  import { reactive, onMounted, ref, nextTick, watch } from 'vue';
  import { GetProcessRoutePage } from '@/api/FactoryModeling';
  import { GetMaterialList } from '@/api/inventory-management/material-management';

  const props = withDefaults(
    //参数说明
    defineProps<{
      value?: number;
      placeholder?: string;
      disabled?: boolean;
    }>(),
    {
      disabled: false,
    }
  );
  let materialList = ref<undefined | any[]>();

  let inputValue = ref('');
  let loadInputValue = async () => {
    if (!props.value) return;
    if (!materialList.value) {
      let { content } = await GetMaterialList({ page: 1, size: -1 });
      materialList.value = content || [];
    }
    inputValue.value =
      materialList.value?.find(({ id }) => id === props.value)?.name || '';
  };

  watch(
    () => props.value,
    (val) => {
      if (!val) return (inputValue.value = '');
      loadInputValue();
    }
  );
  loadInputValue();

  let searchForm = reactive<any>({});
  const getData = async (page: any) => {
    try {
      let res = await GetMaterialList({ ...page, ...searchForm });
      return Promise.resolve(res);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  let visible = ref(false);

  let emit = defineEmits(['choice', 'update:value']);
  let choice = async (item: any) => {
    emit('update:value', item.id);
    emit('choice', item);
    inputValue.value = item.name;
    visible.value = false;
  };
  defineExpose({ inputValue });
</script>

<style scoped></style>
